<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		canvas{border: 1px solid #333;}
	</style>
</head>
<body>
	<!-- canvas的宽度和高度，不能用css来调整，用属性来调整宽度和高度 -->
	<canvas width="600" height="400"></canvas>
	<script type="text/javascript">
		//拿到一张白纸
		let canvas=document.querySelector("canvas");
		
		//拿画笔
		let ctx= canvas.getContext("2d")
		// console.log(ctx)

		//绘制实心矩形
		// ctx.fillRect(x,y,width,height)
		// ctx.fillStyle="orange"			//填充颜色
		// ctx.fillRect(100,100,100,100)		//实心矩形


		//绘制空心矩形
		// ctx.strokeStyle="red"			//绘制之前指定样式
		// ctx.lineWidth=10				//线条的宽度
		// ctx.strokeRect(100,100,100,100)	//空心矩形
		

		// ctx.fillRect(0,0,200,200)
		//擦除   ctx.clearRect(x,y,width,height)
		// ctx.clearRect(0,0,200,200)
		let y=0
		ctx.fillStyle="red"
		ctx.fillRect(250,y,100,100)

		setInterval(()=>{
			ctx.clearRect(250,y,100,100)
			y++		//y=1
			ctx.fillRect(250,y,100,100)
		},10)
	</script>
</body>
</html>